<template>
	<view class="login-container">
		<view class="logo-content">

			<view class="max-title">大学生家教联盟</view>
		</view>

		<view class="login-title">请登陆</view>
		<view class="login-item">
			<u--input v-model="userInfo.userName" placeholder="请输入帐号" prefixIcon="account" shape="circle"
				border="bottom" clearable prefixIconStyle="font-size: 22px;color: #909399"></u--input>
		</view>
		<view class="login-item">
			<u--input v-model="userInfo.password" type="password" placeholder="请输入密码" prefixIcon="lock-open"
				shape="circle" border="bottom" clearable prefixIconStyle="font-size: 22px;color: #909399"></u--input>
		</view>
	 
		<!-- <view class="login-btn">
			<u-button @click="login" :loading="loading" :loadingText="loading?'登录中..':''"
				:customStyle="{'border-radius': '10rpx'}" size="large" type="primary" text="登录"  >
			</u-button>
		</view> -->
		<!-- <view style="margin-top: -20rpx;">
			<vol-alert type="primary">
				<view>演示帐号：admin666 密码：123456</view>
				<view>本地帐号：admin &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;密码：123456</view>
			</vol-alert>
		</view> -->
		<u-divider text="其他方式登陆"></u-divider>
		<view class="login-other">
			<view class="login-other-item"></view>
			<view>
				 
				<button open-type="getPhoneNumber" @getphonenumber="getPhoneNumber" plain="true">获取手机号</button>
			</view>
			<view class="login-other-item"></view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				loading: false,
				codeSrc: "",
				userInfo: {
					userName: "123123",
					password: "123123",


				},
				nickName: "",
				avatarUrl: "",
				icons: [],
			
				PhoneMessage: {




				},
				 
			}
		},
		methods: {
			login() {
				if (this.base.isEmpty(this.userInfo.userName))
					return this.$toast("请输入用户名");
				if (this.base.isEmpty(this.userInfo.password))
					return this.$toast("请输入密码");
				// if (this.base.isEmpty(this.userInfo.verificationCode))
				// 	return this.$toast("请输入验证码");
				this.userInfo.userName = this.userInfo.userName;
				this.userInfo.password = this.userInfo.password;
				// this.userInfo.verificationCode = this.userInfo.verificationCode.trim();
				this.loading = true;
				this.http
					.post("wechat/platformusers/login", this.userInfo, "正在登录....")
					.then((result) => {
						if (result.code == 200) {
							this.loading = false;

							// this.$toast(result.msg);
							this.$toast("登录成功,正在跳转!");
							this.$store.commit("setUserInfo", result.data);
							 uni.navigateBack({
							     delta: 1 // 返回的页面数，如果为1则表示返回上一级页面
							 });
						} else {
							this.loading = false;
							this.$toast(result.msg);
						}

					});
			},


			getPhoneNumber(res) {

				let that = this;
				this.PhoneMessage.phone_encryptedData = res.detail.encryptedData;
				this.PhoneMessage.phone_iv = res.detail.iv;
				
				 
				uni.login({
					provider: 'weixin',
					success: function(loginRes) {
						console.log(loginRes);
						let code = loginRes.code;
						console.log(code);
						// 获取用户信息
						that.PhoneMessage.code = code
						//提交给服务端
						that.http.post("wechat/platformusers/wxlogin", that.PhoneMessage, "正在递交数据....").then(
							data => {

								if (data.code == 200) {
									// this.$toast(data.msg)
									 
									that.$toast("登录成功,正在跳转!");
									that.$store.commit("setUserInfo", data.data);
									// 调用 uni.navigateBack() 函数关闭当前页面
									uni.navigateBack({
									    delta: 1 // 返回的页面数，如果为1则表示返回上一级页面
									});
									 
								} else {
									that.$toast(data.msg)
								}



							});
					}
				});

			},
	 





		},
		onLoad() {

			 
			this.icons = ['https://img.yzcdn.cn/vant/share-icon-wechat.png']
			 
			 
		}
	}
</script>
<style lang="less" scoped>
	.logo-content {
		display: flex;
		align-items: center;
		justify-content: center;
		margin-bottom: 150rpx;
	}

	.max-title {
		font-size: 70rpx;
		text-align: center;
		font-weight: 700;
		color: #55aaff;



	}

	.login-container {
		background: #FFFFFF;
		// height: auto;

		.login-title {
			padding-left: 20rpx;
			font-size: 38rpx;
			margin-bottom: 40rpx;
		}

		padding: 80rpx 60rpx 0 60rpx;

		.login-item {
			padding: 12rpx 0;
			border-bottom: 1px solid #eee;
			margin-bottom: 20rpx;

			/deep/ .u-icon {
				width: 80rpx;
			}
		}

		.login-code {
			border-bottom: none;
			display: flex;

			.img {
				width: 120rpx;
				height: 54rpx;
			}
		}

		.login-btn {
			margin: 50rpx 0 50rpx 0;
		}
	}

	.login-other {
		display: flex;

		.login-other-item {
			flex: 1;
			margin: 0 25rpx;
		}

		.img {
			width: 50px;
			height: 50px;
			margin: 0 30rpx;
		}

		.img:first-child {
			margin-left: 0;
		}
	}
</style>
